<template>
    <div>
        <a-spin :spinning="spinning">
            <a-form :layout="formLayout" :form="form">
                <a-form-item label="父级分类名称" v-bind="formItemLayout" v-if="parentType!=null && parentType.id!=null">
                    {{parentType.name}}
                </a-form-item>
                <a-form-item label="分类名称" v-bind="formItemLayout">
                    <a-input placeholder='请输入分类名称' v-decorator="['name',{rules: [{ required: true, message: '分类名称不能为空!' }]}]" style="width: 100%;"/>
                </a-form-item>
                <a-form-item label="备注" v-bind="formItemLayout">
                    <a-textarea placeholder="备注说明" v-decorator="['remark']" :autosize="{ minRows: 2, maxRows: 6 }" style="width: 100%;"/>
                </a-form-item>
                <a-form-item :wrapperCol="{span:14,offset: 6}">
                    <a-button type='primary' :loading="bntLoading" @click="onSubmit">保 存</a-button>
                </a-form-item>
            </a-form>
        </a-spin>
    </div>
</template>
<script>
    import {findDetail,save} from "@/api/goodsType";
    export default {
        beforeCreate(){
            this.form = this.$form.createForm(this);
        },
        props:{
            id:{
                type:Number,
                default:null
            }
        },
        data() {
            return{
                formLayout:'horizontal',
                spinning:false,
                bntLoading:false,
                model:{ id: null, parentId: 0, type: 'DEPOSIT'},
                parentType:{},
            }
        },
        computed: {
            formItemLayout () {
                const { formLayout } = this
                return formLayout === 'horizontal' ? {
                    labelCol: { span:6},
                    wrapperCol: { span:16 },
                } : {}
            },
        },
        methods:{
            onSubmit(){
                this.bntLoading = true;
                this.form.validateFields(
                    (err,values) => {
                        if (!err) {
                            console.log("==values",values);
                            this.onSave(values);
                        }else{
                            this.bntLoading = false;
                        }
                    },
                )
            },
            async onSave(data){
                this.spinning = true;
                let resp = await save({...this.model,...data});
                this.spinning = false;
                let _this = this;
                if(this.qUtil.validResp(resp)){
                    this.$emit("onCancel",false);
                }else{
                    this.bntLoading = false;
                }
            },
            async onLoad(){
                if(this.id === undefined || this.id === null || this.id === 0) return false;
                let resp = await findDetail(this.id);
                if(this.qUtil.validResp(resp)){
                    let type = resp.data.goodsType;
                    if(type !== null){
                        this.form.setFieldsValue({name:type.name,remark:type.remark});
                    }
                    this.model = resp.data.goodsType
                    this.parentType = resp.data.parentType || {};
                }
            }
        },
        mounted(){
            this.onLoad();
        },
    }
</script>